<template>
  <!-- 顾客账户管理 -->
  <div>
    <div class="header">
      <!-- 时间选择器 -->
      <div class="timeSelect">
        <el-date-picker
          v-model="value"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="onChange"
        >
        </el-date-picker>
      </div>
      <!-- 查询条件  顾客操作类型-->
      <div class="search1">
        <el-select v-model="obj.type" clearable placeholder="请选择">
          <el-option label="充值" value="充值"> </el-option>
          <el-option label="消费" value="消费"> </el-option>
        </el-select>
      </div>
      <!-- 查询条件  状态类型-->
      <div class="search2">
        <el-select v-model="obj.status" clearable placeholder="请选择">
          <el-option label="正常" value="正常"> </el-option>
          <el-option label="未审核" value="未审核"> </el-option>
        </el-select>
      </div>
      <!-- 查询条件  员工信息 -->
      <div class="search3">
        <el-select v-model="obj.userId" clearable placeholder="请选择">
          <el-option v-for="item in cusData" :key="item.id" :label="item.username" :value="item.id"> </el-option>
        </el-select>
      </div>
      <div class="search_button">
        <el-button @click="searchBy" type="primary">查询</el-button>
      </div>
    </div>
    <!-- 顾客的内容 -->
    <div class="customer_content">
      <el-table :data="cusInfo" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="transferMoney" label="交易金额" align="center">
        </el-table-column>
        <el-table-column prop="address" label="交易时间">
         <template  slot-scope="scope">
           {{scope.row.transferTime | dateFormat}} 
         </template>
        </el-table-column>
         <el-table-column prop="type" label="交易类型" align="center">
           <template slot-scope="scope">
                <el-tag v-if="scope.row.type == '充值'">{{scope.row.type}}</el-tag>
                <el-tag v-else  type="danger">{{scope.row.type}}</el-tag>
           </template>
        </el-table-column>
         <el-table-column prop="status" label="状态" align="center">
           <template slot-scope="scope">
                <el-tag v-if="scope.row.status == '正常'">{{scope.row.status}}</el-tag>
                <el-tag v-else  type="danger">{{scope.row.status}}</el-tag>
           </template>
        </el-table-column>
         <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页按钮 -->
    <div class="pagination">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="obj.page"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="obj.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      </el-pagination>
    </div>
     
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      //时间选择器的配置
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: "",
      // 开始结束的时间
      // start: "",
      // end: "",
      //操作类型
      //表格数据
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
      }],
      //表单
      currentPage4:1,
      // 用户的信息
      cusData:[],
      //用户交易的信息
      cusInfo:[],
      obj:{
        page:1,
        pageSize:6,
      },
      //用户的总数
      total:0,
    };
  },
  computed: {},
  methods: {
    // 处理时间函数
    onChange(value) {
      if(value != null)
      {
          value.forEach((element, index) => {
            if (index == 0) {
              this.obj.beginTime = element.getTime();
            } else {
              this.obj.endTime = element.getTime();
            }   
          });
          // this.obj.beginTime = this.start
          // this.obj.endTime = this.end
      }   
    },
    //控制分页
    handleSizeChange(value){
      this.obj.pageSize = value
      this.getCustomerInfo()
    },
    handleCurrentChange(value){
      this.obj.page = value
      this.getCustomerInfo()
    },
    //查询所有员工顾客信息
    async getCustomer(){
      let data ={
        page:1,
        pageSize:1500,
        roleId:6
      }
      let res = await get('/baseUser/pageQuery',data)
      this.cusData = res.data.list
    },
    //获取全部数据
    async getCustomerInfo() { 
     let res = await get('/account/pageQueryCustomerAccount',this.obj)
     this.cusInfo = res.data.list
      this.total = res.data.total
    },
    //按条件查询
    searchBy(){
      this.obj.page = 1
       if(this.value == null) {
         delete this.obj.endTime
         delete this.obj.beginTime
       }
        for (const key in this.obj) {
          if(this.obj[key]== '')
             delete this.obj[key]
       }
        this.getCustomerInfo()
    }
  },
  created() {
    this.getCustomer()
    this.getCustomerInfo()
  },
  mounted() {},
}
</script>
<style scoped>
.header {
  display: flex;
}
.search1{
  margin-left: 10px;
}
.search2{
  margin-left: 10px;
}
.search3{
  margin-left: 10px;
}
.search_button{
  margin-left: 10px;
}
.pagination {
  position: fixed;
  bottom: 40px;
  right: 20px;
}
</style>